<template>
	<view class="extra_charges" @click="show = true, money = ''">
		<image mode="widthFix" src="@/static/image/cost.png"></image>
		<view class="text">
			额外费用
		</view>
	</view>
	<up-popup :show="show" mode="center" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content">
				<view class="title">
					增加额外费用
				</view>
				<view class="input">
					<view class="text">额外费用</view>
					<view class="right">
						<input type="number" v-model="money" placeholder="请输入额外费用" placeholder-style="color: #A6A1A1">
						<view class="text">元</view>
					</view>
				</view>
				<view class="popup-bottom">
					<view class="">
						<up-button @click="show = false" type="info" text="取消"></up-button>
					</view>
					<view class="">
						<up-button @click="handleSumbit" type="primary" text="去支付"></up-button>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import order from '@/api/order.js'
	import utils from '@/utils/util.js'
	const props = defineProps({
		id: {
			type: [Number, String],
			default: 0
		}
	})
	const show = ref(false)
	const money = ref('')
	const emits = defineEmits(['change'])
	const handleSumbit = async () => {
		const { status, info, data } = await order.userPremiumRecharge({
			id: props.id,
			money: money.value
		})
		utils.toast(info)
		if(status == 1) {
			show.value = false
			emits('change')
		}
	}
</script>

<style lang="scss" scoped>
	.extra_charges {
		background: linear-gradient(180deg, #FF9C54 0%, #EF510A 100%);
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(241, 105, 43, 0.6);
		position: fixed;
		bottom: 10%;
		right: 40rpx;
		border-radius: 50%;
		width: 138rpx;
		height: 138rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		z-index: 10;

		image {
			width: 60rpx;
		}

		.text {
			margin-top: -40%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 28rpx;
		}
	}

	.popup-content {
		.input {
			border: 1px solid #F6F6F6;
			height: 100rpx;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #2C1F21;
				line-height: 33rpx;
			}
			.right {
				width: calc(100% - 140rpx);
				display: flex;
				align-items: center;
			}
			input {
				margin: 0 22rpx;
				font-size: 28rpx;
				width: 100%;
				text-align: right;
			}
		}
	}
</style>